<template>
  <div class="title">动漫排行榜管理</div>
  <div class="top">添加动漫</div>
  <div class="container">
    <el-input v-model="cartoninfo.title" placeholder="输入标题" clearable />
    <el-input
      v-model="cartoninfo.content"
      :rows="10"
      type="textarea"
      placeholder="请输入该作品简介"
      class="textarea"
    />
    <div class="upload">
      上传封面：
      <input
        ref="inputer"
        type="file"
        accept="image/png,image/jpeg,image/gif,image/jpg"
        @change="addImg"
      >
    </div>
    <el-button
      class="submitbtn"
      type="primary"
      round
      @click="addCartonInfo()"
    >
      提交
    </el-button>
  </div>
  <div class="bottom">删除排行榜信息</div>
  <el-table :data="cartonranklist" border style="width: 31.3%">
    <el-table-column prop="id" label="id" width="70" />
    <el-table-column prop="title" label="名称" width="150" />
    <el-table-column prop="likenums" label="点赞数" width="150" />
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button type="danger" @click="delCarton(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="delDialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <span>是否删除此动漫？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button
          type="primary"
          @click="delCartonInfo(delid)"
        >Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElInput } from 'element-plus'
export default {
  components: { ElInput },
  data() {
    return {
      cartoninfo: {
        title:'',
        content:'',
        poster:''
      },
      cartonranklist:[],
      delDialogVisible:false,
      delid:''
    }
  },
  created() {
    this.getCartonRankinfo()
  },
  methods: {
    addImg(){
      const inputDOM = this.$refs.inputer
      // 通过DOM取文件数据
      const files = inputDOM.files
      const file = files[0]
      this.cartoninfo.poster = file
    },
    async addCartonInfo() {
      const formData = new FormData()
      formData.append('title', this.cartoninfo.title)
      formData.append('content', this.cartoninfo.content)
      formData.append('poster', this.cartoninfo.poster)
      const res = await this.$api.rank.addCartonInfo(formData)
      console.log(this.cartoninfo, '-------articlelistinfo')
      if(res.data.status === 0) {
        alert('上传成功!')
        this.getCartonRankinfo()
      }else {
        alert('上传失败!')
      }
    },
    async getCartonRankinfo() {
      const res = await this.$api.rank.getCartonRankinfo()
      const { data:{ data:cartonranklist } } = res
      this.cartonranklist = [
        ...cartonranklist
      ]
      console.log(this.cartonranklist,'------thiscartonranklist')
    },
    delCarton(data) {
      this.delDialogVisible = true
      this.delid = data
    },
    async delCartonInfo(data) {
      const saId = { 'id':data }
      const res = await this.$api.rank.delCartonInfo(saId)
      if(res.data.status !== 0) {
        alert('删除失败!')
      } else {
        alert('删除成功!')
        this.delDialogVisible = false
        this.getCartonRankinfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 50px;
}
.top {
  margin-bottom: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  .el-input {
    width: 500px;
    margin-bottom: 50px;
  }
  .textarea {
    width: 1000px;
    margin-bottom: 50px;
  }
  .upload {
    margin-bottom: 50px;
  }
  .submitbtn {
    width: 100px;
    margin-left: 350px;
    margin-bottom: 50px;
  }
}
.bottom {
    margin-bottom: 20px;
  }
</style>
